<template>
	<div class="template">
		<el-image class="topimg" :src="require('@/assets/image/login/topimg.png')" fit="cover"></el-image>
		<div class="contFrom">
			<div class="fromTitle">请重新设置密码</div>
			<div class="fromTitleText">登录密码用于手机和电脑数字果园登录</div>
			<el-form label-width="0px" :model="formLabelAlign">
				<el-form-item label="">
					<el-input :type="setPwdOne?'text':'password'" size=" " v-model="formLabelAlign.password" auto-complete="off"
					 placeholder="请输入新密码">
						<el-image slot="suffix" v-show="!setPwdOne" class="inputImg" @click="setPwdOne = true" :src="require('@/assets/image/login/eyeClose.png')"
						 fit="cover"></el-image>
						<el-image slot="suffix" v-show="setPwdOne" class="inputImg" @click="setPwdOne = false" :src="require('@/assets/image/login/eyeOpen.png')"
						 fit="cover"></el-image>
					</el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input :type="setPwdTwo?'text':'password'" size=" " v-model="formLabelAlign.affirmPassword" auto-complete="off"
					 placeholder="再次输入您的密码">
						<el-image slot="suffix" v-show="!setPwdTwo" @click="setPwdTwo = true" class="inputImg" :src="require('@/assets/image/login/eyeClose.png')"
						 fit="cover"></el-image>
						<el-image slot="suffix" v-show="setPwdTwo" @click="setPwdTwo = false" class="inputImg" :src="require('@/assets/image/login/eyeOpen.png')"
						 fit="cover"></el-image>
					</el-input>
					<span class="formItemSpan">密码长度至少8位数，可以是特殊符号、数字、字母等。</span>
				</el-form-item>
				<el-form-item label="" class="">
					<el-button class="submitBtn" type="primary" size=" " @click="submitBtn">完成</el-button>
				</el-form-item>
			</el-form>
		</div>
		<footers></footers>
	</div>
</template>

<script>
	import footers from '../components/footers.vue'
	export default {
		components: {
			footers
		},
		data() {
			return {
				formLabelAlign: {
					phone: '',
					password: '',
					affirmPassword: '',
					code: ''
				},
				setPwdOne: false,
				setPwdTwo: false
			}
		},
		mounted() {
			this.formLabelAlign.phone = this.$route.query.phone
			this.formLabelAlign.code = this.$route.query.code
		},
		methods: {
			submitBtn() {
				if (this.efficacy()) {
					this.$request.postForm(this.$api.resetPassword, this.formLabelAlign).then(res => {
						if (res.code == 200) {
							this.$message.success('设置成功')
							setTimeout(() => {
								this.$router.replace('/login')
							}, 700)
						}
					}).catch(err => {
						this.$router.replace('/forgetThePassword')
					})
				}
			},
			efficacy() {
				let reg = /^([^\s|\u4E00-\u9FA5]{8,})*$/
				if (!reg.test(this.formLabelAlign.password) || !reg.test(this.formLabelAlign.affirmPassword)) {
					this.$message.error('密码输入错误，请核对后再提交')
					return false
				} else if (this.formLabelAlign.password != this.formLabelAlign.affirmPassword) {
					this.$message.error('两次密码输入不一致，请核对后再提交')
					return false
				} else {
					return true
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.template {
		width: 100%;
		min-height: 100vh;
		background: #FFFFFF;
	}

	.topimg {
		width: 100%;
		height: 400px;
	}

	.contFrom {
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
		width: 500px;
		margin-top: 50px;
		margin-bottom: 170px;
	}

	.fromTitle {
		color: #333333;
		font-size: 30px;
	}

	.fromTitleText {
		color: #919593;
		font-size: 14px;
		margin-bottom: 40px;
	}

	.formItemSpan {
		color: #919593;
		font-size: 14px;
	}

	.code-box {
		text-align: right;
	}

	.submitBtn {
		width: 100%;
	}

	.time {
		color: #23B14D;
	}

	.timeBox {
		color: #919593;
		font-size: 12px;
	}

	.timeBoxs {
		margin-top: -30px;
	}

	.inputImg {
		width: 20px;
		height: 20px;
		margin-top: 10px;
		cursor: pointer;
	}
</style>
